console.log('打包文件....')
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')//引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')
module.exports = {
    // 配置 webpack-dev-server的选项
    devServer: {
        host: '127.0.0.1',  // 配置启动ip地址
        port: 10088,  // 配置端口
        open: true  // 配置是否自动打开浏览器
    },
    devtool: "source-map",//设置source-map 
    // mode: "development",//开发模式的打包
    mode: "production",//生产模式的打包
    // 入口
    entry: "./src/js/main.js",
    // 出口
    output: {
        path: path.resolve(__dirname, "dist"), // 必须写一个绝对路径
        filename: "bundle.js"
    },
    module: {//处理非js内容的loader
        rules: [
        //     {
        //     test: /\.css$/, //匹配.css结尾的文件
        //     //1.css-loader:允许webpack引入css文件
        //     //2.style-loader : 把css代码以style标签的格式插入到html中
        //     use: ["style-loader", 'css-loader'] //有多个loader时,执行顺序是从右向左
        // },
        {
            test: /\.less$/,//匹配.less结尾的文件
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options:{publicPath: '../'}  
                },
                  'css-loader', 'postcss-loader', 'less-loader']
        },
        // {
        //     test: /\.(png|svg|jpg)$/, //处理图片文件
        //     use: [{
        //         loader: 'file-loader',
        //         options: {
        //             limit: 3 * 1024, // 如果图片小于3k就转成base64,否则就直接拷贝
        //             name: '[name]_[hash:8].[ext]',//配置文件指纹 8位
        //             outputPath: './img'
        //         }
        //     },// 它会在出口文件夹下创建一个img文件夹来保存图片
        //         'file-loader']
        // },
        {
            test: /\.(png|svg|jpg)$/, // jpg
            use: [{
                loader: 'url-loader',
                // url-loader是增强版的file-loader
                // 如果图片小于指定的大小，则会转成base64,否则就调用file-loader进行拷贝
                options: {
                    limit: 3 * 1024, // 如果图片小于3k就转成base64,否则就直接拷贝
                    name: '[name]_[hash:8].[ext]',
                    outputPath: './img' // 它会在出口文件夹下创建一个msg文件夹来保存图片
                }
            }]
        },
        {
            test: /\.js$/,
            exclude: /node_modules/,  // 排除目录，通知webpack不要管这个目录下的js
            use: [
                {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            ]
            // es6转es5
        }

        ]
    },
    plugins: [
        new CleanWebpackPlugin(),//压缩前,清除出口文件夹
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'//把css单独放在一个文件中
        }),
        new HtmlWebpackPlugin({
            minify: { // 压缩HTML文件
                removeComments: true, // 移除HTML中的注释
                collapseWhitespace: true, // 删除空白符与换行符
                minifyCSS: true// 压缩内联css
            },
            filename: 'index.html',
            // path.resolve()就是转成绝对路径
            template: path.resolve('./public/index.html') // 指定模块的位置
        })
    ],
    optimization: {//拓展
        minimizer: [
            new OptimizeCssAssetsWebpackPlugin(),//去掉css代码的空格换行
            new TerserWebpackPlugin({//去掉js代码中的console.log
                parallel: 4,
                extractComments: true,
                terserOptions: {
                    compress: {
                        warnings: false,
                        drop_console: true,
                        drop_debugger: true
                    }
                }
            })
        ]
    }

}